<template>
	<view class="bg-color-item br-12 pa-12 order-item" @click="toDetail">
		<view class="flex flex-js-sb flex-ai-center">
			<view class="flex flex-ai-center " style="width: 60%;">
				<view class="font-color-666 font-size-12 text-overflow">订单号：{{ order.order_sn }}</view>
				<w-icon name="copy-disable" size="16" bold></w-icon>
			</view>
			<view class="flex flex-ai-center">
				<text class="font-size-12 font-color-666">{{handleLang(orderStatusInfo.title)}}</text>
				<u-count-down @finish='finish' v-if="countDown>=0&&order.order_status==1&&order.order_type<3"
					class='ml-8' :time="countDown" format="mm:ss"></u-count-down>
			</view>
		</view>
		<u-line margin="24rpx 0 0" dashed></u-line>
		<view class="pt-12 flex">
			<w-image :src='order.goods_cover_image' :width="94/2" :height="94/2" radius="8" mode="aspectFill"></w-image>
			<view class="pl-12 flex-1 flex flex-dir-col flex-js-sb">
				<view class="flex flex-js-sb font-color-black">
					<view class="flex flex-ai-center font-w-600">
						<text class="font-size-14 text-overflow flex-1" style="color: #000;">{{order.goods_name}}</text>
						<view class=" font-size-14"
							v-if="order.collection_code&&order.collection_code.length==1&&order.goods_type==2 && order.order_type != 10">
							<text class="">#</text>
							<text class=" ">{{code[0]}}</text>
							<text class=" ">/{{code[1]}}</text>
						</view>
						<view class="font-color-999" v-else>
							<text class="font-size-10">x</text>
							<text class="font-size-14">{{order.num}}</text>
						</view>
					</view>
					<view class=" font-color-black font-w-600 font-size-14">
						<view v-if="order.order_type==4" class="flex-center">
							<w-icon :name="order.crystal_type | crystal_type" size="14"></w-icon>
							<text class="ml-4  font-size-14">{{ order.num }}</text>
						</view>
						<view class="font-color-price" v-else>
							<text class="font-size-10">￥</text>
							<text class="font-size-14">{{order.total_price}}</text>
						</view>
					</view>
				</view>
			</view>			
		</view>
		<view class="flex flex-js-sb flex-ai-center mt-13" style="color: #9B9B9B;">
				<text class="font-size-12 ">{{order.createtime|formatDate}}</text>
				
			</view>
	</view>
</template>

<script>
	import OrderStatusMap from './orderStatusMap.js'
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			order: {
				type: Object,
				default: () => ({})
			}
		},
		filters: {
			crystal_type(v) {
				let map = {
					'yellow': 'hsj',
					'purple': 'zsj',
					'blue': 'lsj'
				}
				return map[v]
			}
		},
		computed: {
			orderStatusInfo() {
				if (this.order.id) {
					return OrderStatusMap[this.order.order_type][this.order.order_status]
				}
				return {}
			},
			code() {
				if (this.order.collection_code && this.order.collection_code.length == 1) {
					return this.order.collection_code[0].split('/')
				}
			},
			...mapState('config', {
				payTimeLimt(state) {
					return state.info.pay_time_limit ? Number(state.info.pay_time_limit) : 0
				},
				nowTimestamp(state) {
					return state.nowTimestamp
				}
			}),
			countDown() {
				return (this.order.createtime + this.payTimeLimt) * 1000 - this.nowTimestamp
			}
		},
		methods: {
			toDetail() {
				if (this.order.order_type == 19) {
					this.$u.route('/pages/order/regiftDetail', {
						id: this.order.id,
						orderType: this.order.order_type
					})
				} else if (this.order.order_type != 8) {
					this.$u.route('/pages/order/defaultDetail', {
						id: this.order.id,
						orderType: this.order.order_type
					})
				} else {
					this.$u.route('/pages/order/marketDetail', {
						id: this.order.id
					})
				}
			},
			finish() {
				this.$emit('countDownOver', this.order)
			}
		},

	}
</script>

<style lang="scss">
	.order-item {
		/deep/ .u-count-down__text {
			@extend .font-color-textPrimary, .font-size-14;
			line-height: normal;
		}
	}
</style>